<link rel="stylesheet" href="/assets/plugin/mescroll/mescroll.min.css">
<link rel="stylesheet" href="/assets/css/search.css">

<!-- 搜索框 -->
<div class="mui-input-row mui-search">
    <label for="search" style="display: none"></label>
    <input type="search" class="mui-input-clear" placeholder="请输入课程名称" name="search" id="search"/>
</div>

<!-- 课程列表 -->
<div class="mescroll" id="subject">
    <ul class="mui-table-view">

    </ul>
</div>


<!-- 引入底部 -->
{include file='common/footer'/}
<script src="/assets/plugin/mescroll/mescroll.min.js"></script>

<script>

    // 搜索关键字
    let search = '';

    // 事件
    $('#search').keydown(function (e) {
        // 回车键
        if (e.keyCode === 13 || e.keyCode === 108) {
            search = $.trim($(this).val());
            downCallback();
        }
    });

    let scroll = new MeScroll('subject', {
        down: {
            auto: false,//是否在初始化完毕之后自动执行下拉回调callback; 默认true
            callback: downCallback // 下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
        },
        // 上拉加载
        up: {
            auto: true, //是否在初始化时以上拉加载的方式自动加载第一页数据; 默认false
            isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
            callback: UpCallback, //上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
            toTop: { //配置回到顶部按钮
                duration: 600,
                src: "/assets/images/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
                offset: 100
            },
            // 已经到底提示
            htmlNodata: '<div class="more">没有更多了..</div>',
        }
    });

    // 下拉刷新
    function downCallback() {
        scroll.resetUpScroll();
        $('#subject ul').empty();
    }

    // 上拉加载
    function UpCallback(page) {
        // 封装数据
        let data = {
            page: page.num,
            limit: page.size,
            search
        }

        $.ajax({
            type: 'post',
            url: `{:url('/home/subject/subject/search')}`,
            data: data,
            dataType: 'json',
            success: function (res) {
                if (res.code === 0) {
                    mui.toast(res.msg);

                    scroll.endBySize(0, 0);

                    return;
                }

                scroll.endBySize(res.data.SubjectData.length, res.data.SubjectCount);

                fetchList(res.data.SubjectData);
            }
        });
    }

    function fetchList(list) {
        let temp = '';

        for (let item of list) {
            temp += `
            <li class="mui-table-view-cell mui-media">
                <a class="item" href="{:url('/home/subject/subject/info')}?subid=${item.id}">
                    <div class="thumb">
                        <img class="img" src="${item.thumbs_cdn}" alt="封面">
                    </div>
                    <div class="info">
                        <h5 class="title">${item.title}</h5>
                        <p class="content mui-ellipsis">课程分类：${item.category.name}</p>
                        <p class="content mui-ellipsis">创建时间：${item.create_time_text}</p>
                        <p class="content mui-ellipsis">${item.content}</p>
                        <p class="bottom">
                            <span class="like mui-icon mui-icon-starhalf">
                                <span>${item.like_count}</span>
                            </span>
                            <span class="price">￥${item.price}</span>
                        </p>
                    </div>
                </a>
            </li>
            `
        }

        $('#subject ul').append(temp);
    }
</script>